<template>
  <view class="date-picker-page">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">&lt;</text>
      </view>
      <text class="page-title">修改生日</text>
    </view>
    
    <view class="picker-container">
      <view class="date-display">
        <text>{{ formatDate }}</text>
      </view>
      
      <picker
        mode="date"
        :value="currentDate"
        :start="startDate"
        :end="endDate"
        @change="onDateChange"
        class="date-picker"
      >
        <view class="picker-trigger">
          <text>点击选择日期</text>
        </view>
      </picker>
      
      <view class="action-buttons">
        <button class="cancel-btn" @tap="goBack">取消</button>
        <button class="confirm-btn" @tap="confirmSelection">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 日期范围和当前选择
const currentDate = ref('1990-01-01');
const startDate = ref('1920-01-01');
const endDate = ref('2023-12-31');

// 格式化日期显示
const formatDate = computed(() => {
  if (!currentDate.value) return '';
  
  const parts = currentDate.value.split('-');
  if (parts.length !== 3) return currentDate.value;
  
  return `${parts[0]}年${parts[1]}月${parts[2]}日`;
});

// 页面加载时处理参数
onMounted(() => {
  const query = uni.getSystemInfoSync().platform === 'devtools' 
    ? uni.$route.query 
    : getQuery();
  
  if (query) {
    if (query.current) currentDate.value = query.current;
    if (query.start) startDate.value = query.start;
    if (query.end) endDate.value = query.end;
  }
});

// 获取URL查询参数
const getQuery = () => {
  try {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    return currentPage.options || {};
  } catch (e) {
    console.error('获取页面参数失败:', e);
    return {};
  }
};

// 日期变更事件
const onDateChange = (e) => {
  currentDate.value = e.detail.value;
};

// 确认选择
const confirmSelection = () => {
  // 获取页面事件通道
  const eventChannel = getEventChannel();
  
  // 向来源页面传递选择的日期
  if (eventChannel) {
    eventChannel.emit('selectDate', currentDate.value);
  }
  
  // 返回上一页
  goBack();
};

// 获取事件通道
const getEventChannel = () => {
  try {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    return currentPage.getOpenerEventChannel();
  } catch (e) {
    console.error('获取事件通道失败:', e);
    return null;
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  min-height: 100%;
}

.date-picker-page {
  min-height: 100vh;
  
  .header {
    position: relative;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(44, 120, 115, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    
    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .back-icon {
        font-size: 20px;
        font-weight: bold;
        color: #2c7873;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #2c7873;
    }
  }
  
  .picker-container {
    padding: 20px;
    
    .date-display {
      background-color: #fff;
      padding: 20px;
      border-radius: 12px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      display: flex;
      justify-content: center;
      
      text {
        font-size: 20px;
        color: #2c7873;
        font-weight: 500;
      }
    }
    
    .date-picker {
      width: 100%;
      
      .picker-trigger {
        background-color: #fff;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: center;
        
        text {
          font-size: 16px;
          color: #2c7873;
        }
      }
    }
    
    .action-buttons {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      
      button {
        flex: 1;
        height: 44px;
        border-radius: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        
        &.cancel-btn {
          margin-right: 10px;
          background-color: #f5f5f5;
          border: 1px solid #ddd;
          color: #8d6e63;
        }
        
        &.confirm-btn {
          margin-left: 10px;
          background-color: #2c7873;
          color: #fff;
        }
      }
    }
  }
}
</style> 